import _ from "@/assets/utils.js";
import NavBarAgain from "@/components/NavBarAgain";
import { clearUserInfo } from "@/store/slice/baseSlice.js";
import { clearStoreList } from "@/store/slice/storeSlice.js";
import { Toast } from "antd-mobile";
import { RightOutline } from "antd-mobile-icons";
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link } from "react-router-dom";
import styled from "styled-components";
/* 样式 */
const PersonalBox = styled.div`
  .baseInfo {
    box-sizing: border-box;
    margin: 40px 0;
    .pic {
      display: block;
      margin: 0 auto;
      width: 172px;
      height: 172px;
      border-radius: 50%;
    }
    .name {
      line-height: 100px;
      font-size: 36px;
      text-align: center;
      color: #000;
    }
  }
  .tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    height: 80px;
    line-height: 80px;
    font-size: 28px;
    color: #000;
    border-bottom: 2px solid #eee;
  }
`;
export default function Personal(props) {
  let { navigate } = props;
  let { userInfo: info } = useSelector((state) => state.base);
  const dispatch = useDispatch();
  // 退出登录
  const signout = () => {
    // 清除redux中的信息
    dispatch(clearUserInfo());
    dispatch(clearStoreList());
    // 清除token
    _.storage.remove("tk");
    // 提示
    Toast.show({
      icon: "success",
      content: "您已安全退出",
    });
    // 跳转登录页面
    navigate("/login?to=/personal", { replace: true });
  };
  return (
    <PersonalBox>
      <NavBarAgain title='个人中心' />
      {info && (
        <div className='baseInfo'>
          <Link to='/update'>
            <img src={info.pic} alt='' className='pic' />
            <p className='name'>{info.name}</p>
          </Link>
        </div>
      )}
      <div>
        <Link to='/store' className='tab'>
          我的收藏
          <RightOutline />
        </Link>
        <div className='tab' onClick={signout}>
          退出登录
          <RightOutline />
        </div>
      </div>
    </PersonalBox>
  );
}
